<template>
  <el-input v-model="routing_key"></el-input>
  <el-button type="warning" size="small" plain @click="connect2rabbit_mq">读取</el-button>
  <el-timeline>
    <el-timeline-item v-for="(i, k) in log_list" :key="k" :timestamp="i.time" placement="top">
      <div v-if="i.msg_type==='info'">
        {{ i.msg_str }}
      </div>
    </el-timeline-item>
    <el-timeline-item timestamp="2018/4/3" placement="top">
      <el-card>
        <h4>Update Github template</h4>
        <p>Tom committed 2018/4/3 20:46</p>
      </el-card>
    </el-timeline-item>
    <el-timeline-item timestamp="2018/4/2" placement="top">
      <el-card>
        <h4>Update Github template</h4>
        <p>Tom committed 2018/4/2 20:46</p>
      </el-card>
    </el-timeline-item>
  </el-timeline>
</template>

<script>
import Stomp from 'stompjs'

export default {
  name: "windowMessageReceive",
  data() {
    return {
      client: null,
      routing_key: "",
      log_list: []
    }
  },
  created() {
    // this.connect2rabbit_mq();
  },
  methods: {
    onConnected() {
      let exchange = "/exchange/cve_work_direct/" + this.routing_key;
      this.client.subscribe(exchange, this.responseCallback, this.onFailed);
    },
    onFailed() {
      console.log("消息服务器连接已断开！");
    },
    responseCallback(frame) {
      this.log_list.unshift(JSON.parse(frame.body))
      console.log("得到的消息 msg=>" + frame.body);
    },
    connect2rabbit_mq() {
      this.client = Stomp.client("ws://118.178.239.213:21122/ws")
      this.client.debug = () => {};  // 关闭控制台输出
      let headers = {
        "login": "cve_work",
        "passcode": "cve_work",
        "host": "/"  // 虚拟主机，默认“/”
      };
      this.client.connect(headers, this.onConnected, this.onFailed);
    },
  }
}
</script>

<style scoped>

</style>